<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title {
            font-size: larger;
            color: chartreuse;
            font-family: cursive;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>Vue的组件：目的是为了复用代码</p>
        <p>组件传值的两种情况：父传子、子传父</p>
        <p>1.父传子：父组件将数据传给子组件</p>
        <p>2.子传父：子组件将数据传给父组件</p>
        <hr>
        <!--第一步传送数据，第二部接受数据-->
        <hgd :year="year1"></hgd>
        <hgd :year="year2"></hgd>
        <hgd :year="year3"></hgd>
        <hr>
        <cy></cy>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    year1: 21,
                    year2: 22,
                    year3: 23
                }
            },
            //1.注册组件2.组件当标签用
            components: {
                //湖工大
                hgd: {
                    //决定模板里写什么内容
                    template: `
                        <div>
                            <p>湖南工业大学</p>
                            <p class="title">欢迎来到湖南工业大学</p>
                            <p>欢迎{{year}}级新生</p>
                            <button @click="welcome()">欢迎</button>
                            <hr>
                        </div>
                    `,
                    data() {
                        return {

                        }
                    },
                    props: ['year'],
                    methods: {
                        welcome() {
                            alert(`欢迎${this.year}级新生入学，请到2楼缴费`)
                        }
                    }
                },
                //成毅
                //<img src="./cy1.jpg" width="400px"></img>
                cy: {
                    template: `
                        <div>
                            <p>成毅</p>
                            
                            <p>成毅，原名傅诗淇，1990年5月17日出生于湖南省怀化市辰溪县，毕业于中央戏剧学院，中国内地影视男演员。2011年，出演个人首部电视剧《唐宫美人天下》。2012年，完成个人大银幕处女作《诡爱》。2013年，主演青春爱情片《原谅我，来不及爱你》。2014年，主演悬疑片《女生宿舍》。2016年，因在仙侠剧《青云志》中饰演林惊羽而受到广泛关注；同年，参加校园纪实节目《一年级·毕业季》。</p>
                        </div>
                    `
                }
            }
        });
    </script>
</body>

</html>